body {
    background: linear-gradient(to bottom, rgba(130, 217, 252, 0.8), rgba(241, 132, 245, 0.7)) no-repeat;
    height: 100vh;
    overflow: hidden;
}

.total {
    width: 100%;
    height: 100%;
}

.total span {
    position: absolute;
    left: 0;
    top: 0;
    color: #eee;
}



.game {
    width: 864px;
    height: 600px;
    border: 2px solid #000;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.game .Bg {
    height: 100%;
    width: 200%;
    background: url("./FlappyBird素材/bg_1.png") repeat-x;
    position: absolute;
    left: 0;
    top: 0;
}

.game .land {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100px;
    background: url("./FlappyBird素材/land.png") repeat-x;
    ;
}

.game .bird {
    /* background: url("./FlappyBird素材/bird_0.png"); */
    position: absolute;
    top: 150px;
    left: 150px;
    width: 34px;
    height: 24px;
}

.game .bird.swing0 {
    background: url("./FlappyBird素材/bird_0.png") no-repeat;
}

.game .bird.swing1 {
    background: url("./FlappyBird素材/bird_1.png") no-repeat;
}

.game .bird.swing2 {
    background: url("./FlappyBird素材/bird_2.png") no-repeat;
}

.game .pipe {
    position: absolute;
    left: 600px;
    width: 52px;
    height: 200px;
}

.game .pipe.up {
    top: 0;
    background: url("./FlappyBird素材/pipe_up.png");
    background-position-y: bottom;
    /* 图片显示从下往上,在高度不足时，使图片优先显示下面部分 */
}

.game .pipe.down {
    bottom: 100px;
    background: url("./FlappyBird素材/pipe_down.png");
}

.stop {
    width: 80px;
    height: 28px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(FlappyBird素材/menu_button.png);
    z-index: 1;
}

/* 弹窗 */
dialog {
    position: absolute;
    top: center;
    left: center;
    width: 80px;
    height: 200px;
    border: #000 2px solid;
    border-radius: 5px;
    background-color: pink;
}

dialog button {
    display: block;
}

/* 弹窗背景模糊 */
dialog::backdrop {
    background: rgba(0, 0, 0, .15) !important;
    backdrop-filter: blur(5px);
}

.restart {
    width: 80px;
    height: 40px;

}

.continue {
    width: 80px;
    height: 40px;
}

.back {
    width: 80px;
    height: 40px;
}

.score {
    width: 140px;
    height: 40px;
    background-color: transparent;
    text-align: center;
    position: absolute;
    left: 30px;
    bottom: 20px;
    font-size: 28px;
}

.gameOver {
    width: 204px;
    height: 54px;
    position: absolute;
    top: 250px;
    left: 326px;
    background: url(FlappyBird素材/text_game_over.png) no-repeat;
    z-index: 2;
    display: none;
}

.bestScore {
    width: 360px;
    height: 40px;
    background-color: transparent;
    text-align: center;
    position: absolute;
    right: 30px;
    bottom: 24px;
    font-size: 32px;
    color: transparent;
    font-weight: 800;
    color: transparent;
    background: linear-gradient(-45deg, yellowgreen, pink, yellow, skyblue, yellowgreen);
    -webkit-background-clip: text;
    background-clip: text;
    background-position-x: 0px;
    animation: anim 1s infinite linear;
}

@keyframes anim {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: 360px;
    }
}